<template>
  <Fragment>
    <template v-for='(item,index) in menus'>
      <!--   一级菜单直接渲染   -->
      <el-menu-item :key='index' v-if='!item.children' :index='item.id' :disabled='item.disabled'>
        <i :class='item.icon'/>
        <span slot='title'>{{item.title}}</span>
      </el-menu-item>

      <!--   多级菜单通过递归组件渲染   -->
      <el-submenu :key='index' v-else :index='item.id' :disabled='item.disabled'>
        <template slot='title'>
          <i :class='item.icon'/>
          <span slot='title'>{{item.title}}</span>
        </template>
        <FxMenuItem :menus='item.children'/>
      </el-submenu>
    </template>
  </Fragment>
</template>

<script>
// 用于解决多级菜单折叠文字不隐藏的 bug
import {Fragment} from 'vue-fragment'

export default {
  name: 'FxMenuItem',
  components:{
    Fragment
  },
  props:{
    menus: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>
